<style lang="less" scoped>
	.contentWrap{
		width: 1200px;
		margin: 100px auto 40px;
		min-height: 667px;
		.searchDiv{
			width: 840px;
			height: 50px;
			background: #FFFAF5;
			border: 2px solid #FB9132;
			margin:  0 auto;
			position: relative;
			.img{
				position: absolute;
				top:0;
				left:0;
				width: 84px;
				height: 46px;
				line-height: 46px;
				border-right:1px solid #FB9132;
				z-index: 2;
				font-size: 16px;
				color: #FE9333;
				font-weight: bold;
				text-align: center;
				cursor: pointer;
				
			}
		}
		.letterList{
			width: 819px;
			margin: 14px auto 30px;
			display: flex;
			span{
				font-size: 14px;
				color: #686E71;
				letter-spacing: 23px;
				line-height: 22px;
				display: inline-block;
				text-align: center;
				cursor: pointer;
			}
			.on{
				color:#FB9132;
			}
		}
		.zjShow{
			width: 1200px;
			margin: 0 auto 20px;
			border: 1px solid #E3E8EA;
			background: #FFFFFF;
			.title{
				line-height: 40px;
				padding: 0 40px;
				border-bottom: 1px solid #E3E8EA;
				li{
					float: left;
					margin-right:60px;
					cursor: pointer;
					font-size: 14px;
					color: #686E71;
					font-weight: bold;
				}
				li:hover{
					color:#FE9333;
					border-bottom: 2px solid #FE9333;
				}
				li:last-child{
					margin-right: 0;
				}
				.on{
					color:#FE9333;
					border-bottom: 2px solid #FE9333;
				}
			}
			.content{
				padding:18px 0 0 36px;
				.popup{//搜索提示
					font-size: 14px;
					color: #686E71;
					line-height: 22px;
					margin-bottom: 21px;
				}
				.popup2{
					height: 12px;
				}
				.info{
					float: left;
					width: 202px;
					height: 365px;
					background: #FFFFFF;
					border: 1px solid #E3E8EA;
					border-radius: 4px;
					cursor: pointer;
					box-shadow: 2px 2px 4px 0 rgba(205,211,214,0.37);
					margin-right: 30px;
					margin-bottom: 30px;
					transition: all 0.1s;
					overflow: hidden;
					border-radius: 4px 4px 0 0;
					.topImg{
						position: relative;					
						top:0;
						left:0;
						width: 200px;
						height: 320px;
						z-index: 2;
						.img{
							width: 200px;
							height: 320px;
							background-color: red;
							border-radius: 4px 4px 0 0;
							transform: scale(0.53);
							position: absolute;
							top:-78px;
							left:-49px;
							
						}
						.topHover{
							position: absolute;
							top: -2px;
							left: -1px;
							border-radius: 0;
							width: 200px;
							height: 320px;
							z-index: 3;	
							background:rgba(0,0,0,0.6);
							border-radius: 4px 4px 0 0;
							text-align: center;
							padding-top:59px;
							display: none;		
							p{
								font-size: 14px;
								color: #FFFFFF;
								margin-bottom: 18px;
							}						
							img{
								width: 150px;
								height: 150px;
							}			
						}
					}
					.topImg:hover{
						.topHover{
							display: block;
						}
					}
					.bottomInfo{
						width: 100%;
						height: 43px;;
						padding: 0 12px;
						line-height: 43px;
						.name{
							width: 100px;
							white-space:nowrap;
							text-overflow:ellipsis;
							overflow:hidden;
							font-size: 14px;
							color: #686E71;
							font-weight: bold;
							float: left;
						}
						.number{
							float: right;
							font-size: 12px;
							color: #B4BDC1;
							img{
								width: 16px;
								height: 16px;
								vertical-align: sub;
								margin-right: 4px;
							}
						}
					}
				}
				.info:hover{
					transition: all 0.1s;
					transform: translateY(-10px);
					box-shadow: 0 10px 40px 0 rgba(255, 211, 214, 0.37), 0 10px 20px 0 rgba(180, 189, 193, 0.65);
				}
				.pages{
					float: left;
					width: 100%;
					display: flex;
					justify-content: center;
					margin-bottom: 20px;
				}
			}
			.notInfo{
				height: 340px;
				text-align: center;
				padding-top:80px;
				img{
					width: 120px;
					height: 120px;
					margin-bottom: 20px;
				}
				p{
					font-size: 14px;
					color: #686E71;
					line-height: 22px;
				}
			}
		}
	}
</style>
<style lang="less">
	.searchDiv{
		.ivu-input-wrapper{
			width: 752px;
			float:right;		
			border:0;	
		}
		.ivu-input{
			font-size:16px !important;
			height: 46px;
			line-height:46px;
			border-radius:0;
			border:0;
			background-color:#FFFAF5;
			color: #FE9333;
		}
	}
</style>

<template>
	<div @click="bodyClick">
		<v-header :loginBack="loginBackFn"></v-header> 
		<!-- 内容部分 -->
		<div class="contentWrap">
			<!-- 搜索框 -->
			<div class="searchDiv">
				<div class="img" @click="enterFn">搜 索</div>
				<Input type="text" v-model="keyword" @on-enter="enterFn"></Input>
			</div>
			<!-- 字母 -->
			<div class="letterList">
				<span v-for="item in letterObj" @click="searchFun(item)" :class="(item==letterChoose)?'on':''">{{item}}</span>
			</div>
			<!-- 传记展示区域 -->
			<div class="zjShow">
				<!-- 标题 -->
				<ul class="title clearfix">
					<li :class="tapindex===''?tapon:''" @click="searchtap('','')">全部传记</li>
					<li :class="tapindex===index?tapon:''" v-for="(item,index) in basedata" @click="searchtap(index,item.code)" v-text="item.value"></li>
				</ul>
				<!-- 内容 -->
				<div class="content clearfix" v-if="listdata.length!=0">
					<!-- 搜索展示 -->
					<div class="popup" v-if="enterFlag">"<span>{{keyword}}</span>"，相关模板信息<span>{{listdata.length}}</span>条</div>
					<div class="popup2" v-else></div>
					<div class="info" v-for="(item,index) in listdata" @click="checkBiography(item.cemeteryId,item.template)">
						<!-- 封面 -->
						<div class="topImg">
							<div class="img">
								<div :style="item.IntroduceModule.headerStyle">
									<!--头像-->
									<div :style="item.IntroduceModule.moduleImageDivStyle"><img :src="hotsimg+item.IntroduceModule.cemeteryIntroduction.headPictureSource" style="width: 100%;height: 100%;"/></div>
									<!--姓名-->
									<div :style="item.IntroduceModule.nameStyle" ref="nameStyle">{{item.IntroduceModule.cemeteryIntroduction.userName}}</div>
									<!--出生日期-->
									<div :style="item.IntroduceModule.introductionDayStyle" ref="introductionStyle">{{birthdayTime(item.IntroduceModule.cemeteryIntroduction.birthDay)+birthDayAnd+birthdayTime(item.IntroduceModule.cemeteryIntroduction.deadDay)}}</div>
									<!--个人简介-->
									<div :style="item.IntroduceModule.introductionStyle" ref="introductionDayStyle">{{item.IntroduceModule.cemeteryIntroduction.introduction}}</div>			
									<v-edittext :textflag="item.IntroduceModule.templateModuleContent"></v-edittext>
									<img  :src="hotsimg+item1.picSourcePath" v-for="(item1,index) in item.IntroduceModule.templateModulePicDTO" ref="picstyle" :style="item1.picStyle">
									<img  :src="hotsimg+item1.videoPicSourcePath" v-for="(item1,index) in item.IntroduceModule.templateModuleVideoDTO" ref="spstyle" :style="item1.videoStyle">
								</div>
							</div>
							<!-- hover 二维码 -->
							<div class="topHover">
								<p>手机扫一扫预览效果</p>
								<img :src="item.qrcodeImageUrl" />
							</div>
						</div>
						<!-- 名称和查看量 -->
						<div class="bottomInfo clearfix">
							<div class="name">{{item.userName}}</div>
							<div class="number"><img src="../../images/browse@3x.png" />{{item.browseNumber}}</div>
						</div>
					</div>
					<!-- 分页 -->
					<div class="pages">
						<Page :total="listdataTotal" :page-size="20" @on-change="pageChange" :current="PageNum"></Page>
					</div>
				</div>
				<!-- 缺省页 -->
				<div class="notInfo" v-else>
					<img src="../../images/noresult.png" />
					<p>对不起，由于用户隐私设置，没有搜索到您要的相关传记信息。</p>
				</div>
			</div>
			<!-- 推荐传记展示区域 -->
			<div class="zjShow" v-show="exhibitionlist">
				<!-- 标题 -->
				<ul class="title clearfix">
					<li>更多人物传记</li>
				</ul>
				<!-- 内容 -->
				<div class="content clearfix">
					<!-- 搜索展示 -->
					<div class="popup2"></div>
					<div class="info" v-for="(item,index) in exhibitionlist" @click="checkBiography(item.cemeteryId,item.template)">
						<!-- 封面 -->
						<div class="topImg">
							<div class="img">
								<div :style="item.IntroduceModule.headerStyle">
									<!--头像-->
									<div :style="item.IntroduceModule.moduleImageDivStyle"><img :src="hotsimg+item.IntroduceModule.cemeteryIntroduction.headPictureSource" style="width: 100%;height: 100%;"/></div>
									<!--姓名-->
									<div :style="item.IntroduceModule.nameStyle" ref="nameStyle">{{item.IntroduceModule.cemeteryIntroduction.userName}}</div>
									<!--出生日期-->
									<div :style="item.IntroduceModule.introductionDayStyle" ref="introductionStyle">{{birthdayTime(item.IntroduceModule.cemeteryIntroduction.birthDay)+birthDayAnd+birthdayTime(item.IntroduceModule.cemeteryIntroduction.deadDay)}}</div>
									<!--个人简介-->
									<div :style="item.IntroduceModule.introductionStyle" ref="introductionDayStyle">{{item.IntroduceModule.cemeteryIntroduction.introduction}}</div>			
									<v-edittext :textflag="item.IntroduceModule.templateModuleContent"></v-edittext>
									<img  :src="hotsimg+item1.picSourcePath" v-for="(item1,index) in item.IntroduceModule.templateModulePicDTO" ref="picstyle" :style="item1.picStyle">
									<img  :src="hotsimg+item1.videoPicSourcePath" v-for="(item1,index) in item.IntroduceModule.templateModuleVideoDTO" ref="spstyle" :style="item1.videoStyle">
								</div>
							</div>
							<!-- hover 二维码 -->
							<div class="topHover">
								<p>手机扫一扫预览效果</p>
								<img :src="item.qrcodeImageUrl" />
							</div>
						</div>
						<!-- 名称和查看量 -->
						<div class="bottomInfo clearfix">
							<div class="name">{{item.userName}}</div>
							<div class="number"><img src="../../images/browse@3x.png" />{{item.browseNumber}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--意见反馈-->
		<v-feedback :backModalType="backModal" @backModalTypeFun="showBackModal"></v-feedback>
		<v-footer></v-footer>
	</div>
</template>
<script>
   import global from '../../config/global'
	import { mapState } from 'vuex'
    import { USER_SIGNIN } from 'store/user'
    export default {
        computed: mapState({ user: state => state.user }),
		data(){
			return{
				listdata:"",
				exhibitionlist:"",//展示列表
				tapon:"on",
				tapindex:"",
				lifebookCategory:"",
				total:"",
				keyword:"",
				basedata:"",
				enterFlag:false,
				staticimg:global.staticimg,
				hotsimg:global.imgurl,//图片前缀
				backModal:false,//反馈弹窗
				letterObj:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],			
				letterChoose:"",//判断当前选择的是哪一个字母
				PageNum:1,//页码
				listdataTotal:"",
			}
		},
		created() {
			if(!this.$route.query.keyword){
				this.ajaxList(3);
			}else{
				this.keyword = this.$route.query.keyword;
				this.ajaxList(1);
			}
			
		},
		mounted(){
			document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
		},
		watch:{
			$route: 'ajax',
		},
		methods:{
			ajax(){//查询基础数据
				this.$http.get(global.host+'/common/master/data/query?masterDataType=16')
				.then((response) => {	
					this.basedata=response.body.result
				})
				.catch(function (response) {
					
				})
			},
			enterFn(){
				if(this.keyword == ""){
					return;
				}
				this.enterFlag=true;
				this.ajaxList(1);
			},
			ajaxList(type){
				//查询类型
				if(type == 1){
					//搜索
					this.letterChoose = "";
					this.tapindex = "";
					this.lifebookCategory = "";
					this.PageNum = 1;
				}else if(type == 2){
					this.enterFlag = false;
					this.tapindex = "";
					this.lifebookCategory = "";
					this.keyword = "";
					this.PageNum = 1;
				}else if(type == 3){
					this.letterChoose = "";
					this.enterFlag = false;
					this.keyword = "";
					this.PageNum = 1;					
				}
				this.$http.get(global.host+'/cemeteryOwner/unsecured/open/lifebook?startPage='+this.PageNum+'&pageSize=20&searchKeyWord='+this.keyword+'&lifebookCategory='+this.lifebookCategory+'&firstLetter='+this.letterChoose)
				.then((response) => {
					this.listdata=response.body.result;
					this.total=response.body.total;
					this.exhibitionlist=response.body.notSearchList;
					this.listdataTotal = response.body.total;//总条数
					this.ajax();
				})
				.catch(function (response) {
					
				})
			},
			pageChange(value){
				this.PageNum = value;
				this.ajaxList();
			},
			searchFun(name){
				this.letterChoose = name;
				this.ajaxList(2)
			},
			searchtap(index,code){
				this.tapindex=index;
				this.lifebookCategory = code;
				this.ajaxList(3)
			},
			loginBackFn(){
				return { path: '/homeShow'};//跳转传记页面
			},
			showBackModal(value){//打开意见反馈弹窗
				this.backModal = value;//根据组件传出的参数来修改传入的值
			},
			bodyClick(){
				this.backModal = false;
			},
			checkBiography(cemeteryId,template){//查看人物传记
				this.$router.push({ path: '/publish',query:{"cemeteryId":cemeteryId,"template":template}});//跳转传记页面
			},
			birthdayTime(time){         
                function add0(m) {
					return m < 10 ? '0' + m : m
				}
				var time = new Date(parseInt(time));
				var y = time.getFullYear();
				var m = time.getMonth() + 1;
				var d = time.getDate();
				if(this.customized == 1){//判断是否需要中文
					y = this.Arabia(y);				
					m = this.Arabia2(m);				
					d = this.Arabia2(d);	
					this.birthDayAnd = " 至 ";
				    return y + '年' + add0(m) + '月' + add0(d) + '日';                    
				}else{
					this.birthDayAnd = " - ";
				    return y + '-' + add0(m) + '-' + add0(d) + '';
                }
            },
            Arabia(Num){
				for (var i = Num.length - 1; i >= 0; i--) {
					Num = Num.replace(",", "")//替换Num中的“,”
					Num = Num.replace(" ", "")//替换Num中的空格
				}    
				//字符处理完毕后开始转换，采用前后两部分分别转换
				var part = String(Num).split(".");
				var newchar = "";
				//小数点前进行转化
				for (i = part[0].length - 1; i >= 0; i--) {
					var tmpnewchar = ""
					var perchar = part[0].charAt(i);
					switch (perchar) {
						case "0":  tmpnewchar = "零" + tmpnewchar;break;
						case "1": tmpnewchar = "一" + tmpnewchar; break;
						case "2": tmpnewchar = "二" + tmpnewchar; break;
						case "3": tmpnewchar = "三" + tmpnewchar; break;
						case "4": tmpnewchar = "四" + tmpnewchar; break;
						case "5": tmpnewchar = "五" + tmpnewchar; break;
						case "6": tmpnewchar = "六" + tmpnewchar; break;
						case "7": tmpnewchar = "七" + tmpnewchar; break;
						case "8": tmpnewchar = "八" + tmpnewchar; break;
						case "9": tmpnewchar = "九" + tmpnewchar; break;
					}
					newchar = tmpnewchar + newchar;
				}   
				return newchar;
			},
			Arabia2(Num){				
				for (var　i = Num.length - 1; i >= 0; i--) {
						Num = Num.replace(",", "")//替换Num中的“,”
						Num = Num.replace(" ", "")//替换Num中的空格
				}    
				//字符处理完毕后开始转换，采用前后两部分分别转换
				var part = String(Num).split(".");
				var newchar = "";
				//小数点前进行转化
				for (var i = part[0].length - 1; i >= 0; i--) {
					var tmpnewchar = ""
					var perchar = part[0].charAt(i);
					switch (perchar) {
						// case "0":  tmpnewchar = "零" + tmpnewchar;break;
						case "1": tmpnewchar = "一" + tmpnewchar; break;
						case "2": tmpnewchar = "二" + tmpnewchar; break;
						case "3": tmpnewchar = "三" + tmpnewchar; break;
						case "4": tmpnewchar = "四" + tmpnewchar; break;
						case "5": tmpnewchar = "五" + tmpnewchar; break;
						case "6": tmpnewchar = "六" + tmpnewchar; break;
						case "7": tmpnewchar = "七" + tmpnewchar; break;
						case "8": tmpnewchar = "八" + tmpnewchar; break;
						case "9": tmpnewchar = "九" + tmpnewchar; break;
					}
					switch (part[0].length - i - 1) {
						case 0: tmpnewchar = tmpnewchar; break;
						case 1: if (perchar != 0) tmpnewchar = tmpnewchar + "十"; break;
						case 2: if (perchar != 0) tmpnewchar = tmpnewchar + "百"; break;
						case 3: if (perchar != 0) tmpnewchar = tmpnewchar + "千"; break;
						case 4: tmpnewchar = tmpnewchar + "万"; break;
						case 5: if (perchar != 0) tmpnewchar = tmpnewchar + "十"; break;
						case 6: if (perchar != 0) tmpnewchar = tmpnewchar + "百"; break;
						case 7: if (perchar != 0) tmpnewchar = tmpnewchar + "千"; break;
						case 8: tmpnewchar = tmpnewchar + "亿"; break;
						case 9: tmpnewchar = tmpnewchar + "十"; break;
					}
					newchar = tmpnewchar + newchar;
				}   
				//替换所有无用汉字，直到没有此类无用的数字为止
				while (newchar.search("零零") != -1 || newchar.search("零亿") != -1 || newchar.search("亿万") != -1 || newchar.search("零万") != -1) {
					newchar = newchar.replace("零亿", "亿");
					newchar = newchar.replace("亿万", "亿");
					newchar = newchar.replace("零万", "万");
					newchar = newchar.replace("零零", "零");      
				}
				//替换以“一十”开头的，为“十”
				if (newchar.indexOf("一十") == 0) {
					newchar = newchar.substr(1);
				}
				//替换以“零”结尾的，为“”
				if (newchar.lastIndexOf("零") == newchar.length - 1) {
					newchar = newchar.substr(0, newchar.length - 1);
				}
				return newchar;
			}
		}
    }
</script>